<template>
  <div>
    <van-nav-bar title="交易明细" fixed>
      <img
        src="~assets/image/arrow_left.png"
        alt=""
        slot="left"
        width="20"
        height="20"
        @click="leftClick"
      />
    </van-nav-bar>
    <div class="xx"></div>

    <van-dropdown-menu>
      <!--  订单类型-->
      <van-dropdown-item title="订单类型" ref="item">
        <van-checkbox-group v-model="type">
          <van-cell-group>
            <van-cell title="不限"></van-cell>
            <van-cell
              v-for="(item, index) in option1"
              clickable
              @click="toggle(item)"
              :key="'a' + index"
              :title="item.text"
              :style="
                type.indexOf(item.value) > -1
                  ? 'background:#efefef;margin-bottom:1px'
                  : 'background:#FFF;margin-bottom:1px'
              "
            ></van-cell>
            <div style="padding: 5px 0">
              <van-button type="info" block @click="onConfirm">
                确认
              </van-button>
            </div>
          </van-cell-group>
        </van-checkbox-group>
      </van-dropdown-item>
      <!-- 订单状态 -->
      <van-dropdown-item title="订单状态" ref="item1">
        <van-checkbox-group v-model="type1">
          <van-cell-group>
            <van-cell title="不限"></van-cell>
            <van-cell
              v-for="(item1, index) in option2"
              clickable
              :key="'a' + index"
              @click="toggle1(item1)"
              :title="item1.text"
              :style="
                type1.indexOf(item1.value) > -1
                  ? 'background:#efefef;margin-bottom:1px'
                  : 'background:#FFF;margin-bottom:1px'
              "
            ></van-cell>
            <div style="padding: 5px 0">
              <van-button type="info" block @click="onConfirm1">
                确认
              </van-button>
            </div>
          </van-cell-group>
        </van-checkbox-group>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 111 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="item"
          slot="default"
          v-for="(item3, index) in orderlist"
          :key="'c' + index"
          @click="itemClick(item3)"
        >
          <div class="item-left">
            <img :src="imgSrc(item3)" alt="" width="30" height="30" />
            <div>
              <p>[{{ item3.desc }}]</p>
              <p>{{ item3.createTime }}</p>
            </div>
          </div>
          <div class="item-right">
            <p class="money">+{{ item3.realAmount | getrealAmount }}</p>
            <p class="type">{{ item3.status | statusType }}</p>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { queryTransactionOrderInfoApi } from "network/ApiServe";
export default {
  name: "ReturningAServant",
  filters: {
    statusType(index) {
      let state = "";
      switch (index) {
        case "1":
          state = "已成功";
          break;
        case "2":
          state = "已取消";
          break;
        case "3":
          state = "待处理";
          break;
        case "4":
          state = "待处理";
          break;
      }
      return state;
    },
    getrealAmount(money) {
      return parseFloat(money).toFixed(2);
    },
  },
  created() {
    this.token = localStorage.getItem("token");
    this.userId = localStorage.getItem("userId");
  },
  data() {
    return {
      value1: 0,
      switch1: false,
      switch2: false,

      type: [],
      option1: [
        { text: "订单充值", value: 0 },
        { text: "订单支付", value: 1 },
        { text: "订单提现", value: 2 },
        { text: "订单退款", value: 4 },
        { text: "转账类型", value: 5 },
        { text: "奖励发放", value: 6 },
        { text: "信用卡还款", value: 7 },
        { text: "信用卡还款账户充值", value: 8 },
        { text: "信用卡管家首笔消费", value: 9 },
        { text: "信用卡管家消费", value: 10 },
        { text: "信用卡管家还款", value: 11 },
      ],
      type1: [],
      option2: [
        { text: "待完成", value: 0 },
        { text: "已成功", value: 1 },
        { text: "已取消", value: 2 },
        { text: "待处理", value: 3 },
        { text: "待处理", value: 4 },
      ],

      // 列表
      page: 0,
      totalPages: 0,
      orderlist: [],
      loading: false,
      finished: false,
      isLoading: false,
    };
  },
  mounted() {
    this.getTransactionOrderInfo();
  },
  methods: {
    //itemClick
    itemClick(item) {
      let _this = this;
      _this.$router.push({
        name: "OrderDetail",
        params: {
          img: _this.imgSrc(item),
          channelname: item.channelname,
          rate: item.rate,
          amount: item.realAmount,
          statusType: item.status,

          extraFee: item.extraFee,
          desc: item.desc,
          type: item.type,
          createTime: item.createTime,
          ordercode: item.ordercode,
        },
      });
    },
    //imgSrc
    imgSrc(item3) {
      let img = "";
      if (item3.desc.indexOf("充值") > -1) {
        img = require("assets/image/icon_qzg_lord_order_0.png");
      } else if (item3.desc.indexOf("支付") > -1) {
        img = require("assets/image/icon_qzg_lord_order_1.png");
      } else if (item3.desc.indexOf("提现") > -1) {
        img = require("assets/image/icon_qzg_lord_order_2.png");
      } else if (item3.desc.indexOf("退款") > -1) {
        img = require("assets/image/icon_qzg_lord_order_4.png");
      } else if (item3.desc.indexOf("消费") > -1) {
        img = require("assets/image/icon_qzg_lord_order_10.png");
      } else if (item3.desc.indexOf("还款") > -1) {
        img = require("assets/image/icon_qzg_lord_order_11.png");
      } else {
        img = require("assets/image/logo.png");
      }

      return img;
    },
    //下拉
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.page = 0;
        this.getTransactionOrderInfo();
        this.isLoading = false;
      }, 1000);
    },
    // 上拉
    onLoad() {
      setTimeout(() => {
        // 加载状态结束
        this.loading = false;
        this.getTransactionOrderInfo();

        // 数据全部加载完成
        if (this.page >= this.totalPages) {
          this.finished = true;
        }
      }, 1000);
    },

    leftClick() {
      this.$router.back(-1);
    },

    toggle(item) {
      console.log(this.type.indexOf(item.value));

      if (this.type.indexOf(item.value) > -1) {
        this.type.splice(this.type.indexOf(item.value), 1);
      } else {
        this.type.push(item.value);
      }

      console.log(this.type);
      this.page = 0;
      this.orderlist = [];
      this.getTransactionOrderInfo();
    },
    toggle1(item) {
      console.log(this.type1.indexOf(item.value));

      if (this.type1.indexOf(item.value) > -1) {
        this.type1.splice(this.type1.indexOf(item.value), 1);
      } else {
        this.type1.push(item.value);
      }

      console.log(this.type1);
      this.page = 0;
      this.orderlist = [];
      this.getTransactionOrderInfo();
    },
    // 订单类型 按钮
    onConfirm() {
      console.log(this.type);

      this.$refs.item.toggle();
    },
    // 订单状态 按钮
    onConfirm1() {
      console.log(this.type1);
      this.$refs.item1.toggle();
    },
    // 网络请求
    getTransactionOrderInfo() {
      let _this = this;
      queryTransactionOrderInfoApi(
        _this.token,
        _this.userId,
        _this.page,
        String(_this.type),
        String(_this.type1),
        ""
      )
        .then((res) => {
          console.log("getTransactionOrderInfo", res);
          if (res.resp_code === "000000") {
            res.result.content.filter((item) => {
              _this.orderlist.push(item);
            });
            _this.page = res.result.number + 1;
            _this.totalPages = res.result.totalPages;
            console.log("_this.orderlist", _this.orderlist);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style>
.van-dropdown-menu__title--active {
  color: #35a7fd !important;
}
</style>
<style scoped>
.xx {
  height: 46px;
}
.van-dropdown-menu {
  position: fixed;
  z-index: 9;
  left: 0;
  right: 0;
  margin-bottom: 46px;
}
.van-button {
  padding: 5px 0;
}
.van-cell__title,
.van-cell__value {
  flex: 1;
  text-align: center;
}
.van-list {
  margin-top: 46px;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
  background-color: #fff;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.item-left {
  display: flex;
}
.item-left img {
  margin-right: 15px;
  align-items: center;
}
.item-left div p {
  font-size: 15px;
  margin: 4px 0;
  color: #444;
}
.item-right p {
  font-size: 16px;
  margin: 3px 0;
  text-align: end;
}
.money {
  color: #121212;
}
.type {
  color: #999;
}
</style>